<template>
  <div class="logo-gate">
    <div class="gate-context">
      <div class="gc-head">
        <h3>KICAN</h3>
      </div>
      <div class="gc-form">
        <Form ref="loginFrom" :model="model" :rules="rules">
          <FormItem prop="username">
            <Input type="text" v-model="model.username" placeholder="用户名">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem prop="password">
            <Input type="password" v-model="model.password" placeholder="密码">
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem prop="code">
            <Row>
              <Col span="13">
                <Input type="text" v-model="model.code" placeholder="验证码">
                  <Icon type="ios-lock-outline" slot="prepend"></Icon>
                </Input>
              </Col>
              <Col span="10" offset="1">
                <a @click="verifyH" style="cursor: pointer"><img :src="src" alt=""/></a>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="loginAction">登录</Button>
          </FormItem>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
import { getCaptcha } from "@/api/login";

export default {
  name: 'logo',
  data () {
    return {
      model: {},
      rules: {
        username: [{ required: true, message: '请输入用户名' }],
        password: [{ require: true, message: '请输入密码' }]
      },
      src: ''
    }
  },
  created() {
    this.verifyH()
  },
  methods: {
    verifyH(){
      getCaptcha().then(res => {
        console.log(res)
        this.src = res.data['text']
      }, reason => {
        console.log(reason)
      })
    },
    loginAction () {
      this.$refs['loginFrom'].validate((vde) => {
        console.log(vde)
      })
    },

  }
}
</script>

<style lang="less" scoped>
.logo-gate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #437ab1;

  .gate-context {
    width: 420px;
    background-color: #fff;

    .gc-head {
      h3 {
        height: 30px;
        line-height: 30px;
        margin-top: 30px;
        text-align: center;
        font-size: 20px;
      }
    }

    .gc-form {
      padding: 30px 45px 20px 50px;
    }
  }
}
</style>
